<template>
  <div class="advert-list">
    <el-card>
      <div slot="header">
        <el-button>添加广告</el-button>
      </div>
      <el-table v-loading="isloading" :data="advertList" style="width: 100%">
        <el-table-column prop="id" label="id" width="180">
        </el-table-column>
        <el-table-column prop="name" label="广告名称" width="180">
        </el-table-column>
        <el-table-column prop="id" label="广告位置" width="180">
          <template slot-scope="scope">
            {{ scope._self.positionList[0].name }}
          </template>
        </el-table-column>
        <el-table-column prop="img" label="广告图片" width="180">
          <template slot-scope="scope">
            <el-image
            fits='fill'
              style="width: 100px; height: 100px"
              :src="scope.row.img">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column width="150px" label="添加时间">
          <template slot-scope="scope">
            <p>开始时间：{{ scope.row.startTimeFormatString | dataFormat }}</p>
            <p>结束时间：{{ scope.row.endTimeFormatString | dataFormat }}</p>
          </template>
        </el-table-column>
        <el-table-column width="150px" label="上线/下线">
        <template slot-scope="scope">
              <el-switch :active-value="1" @change="handle(scope.row)" :inactive-value="0" active-color="#13ce66" inactive-color="#ff4949" v-model="scope.row.status"></el-switch>
        </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" width="150px">
          <template slot-scope="scope">
            <div>
              <el-button type="text" @click="handleEdit(scope.row)"
                >编辑</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { getADList, getPositionList, getPositionListOne, setStatus } from '@/services/advert'

function isaddZero (data) {
  return data >= 10 ? data : '0' + data
}

export default {
  name: 'advertList',
  data () {
    return {
      advertList: [],
      isloading: false,
      positionList: [],
      num: 0,
      form: {
        id: null,
        status: null
      }
    }
  },
  created () {
    this.getList()
    this.setPosition()
  },
  methods: {
    async getList () {
      const { data } = await getADList()
      if (data.state === 1) {
        this.advertList = data.content
        console.log(this.advertList)
      }
    },
    async setPosition () {
      const { data } = await getPositionList()
      if (data.state === 1) {
        this.positionList = data.content
        console.log(this.positionList)
      }
    },
    async handle (row) {
      this.form.status = row.status
      this.form.id = row.id
      const { data } = await setStatus(this.form)
      console.log(data)
      if (data.state === 1) {
        this.$message.success(`已${row.status === 1 ? '上线' : '下线'}`)
      } else {
        this.$message.error('操作失败')
      }
    },
    async getADInfo (id) {
      const { data } = await getPositionListOne(id)
      if (this.num < 1) {
        this.num++
        console.log(data)
      }
      return data.content
    }
  },
  filters: {
    dataFormat (data) {
      data = new Date(data)
      return `${data.getFullYear()}-${isaddZero(
        data.getMonth() + 1
      )}-${isaddZero(data.getDate())}

            ${isaddZero(data.getHours())}:${isaddZero(
        data.getMinutes()
      )}:${isaddZero(data.getSeconds())}`
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
